<template>
  <div class="zreo">
    <el-carousel height="550px" direction="vertical" :autoplay="true">
      <el-carousel-item v-for="item in cats" :key="item.key">
        <img style="width: 100%" :src="item.pic" alt="" />
      </el-carousel-item>
    </el-carousel>
    <div>
      <div class="two">
        <div class="three">奇景一览</div>
        <div class="four">峰林仙境,让您心悦诚服</div>
      </div>
      <div class="yilan">
        <div v-for="(item,i) in qijing" :key="i">
          <div class="yilantu">
            <router-link :to="`/three/${i+1}`"><img :src="item.p_pic" alt="" /></router-link>
          </div>
          <p>{{ item.p_title }}</p>
        </div>
      </div>
      <div class="huodong">
        <div class="two1">
          <div class="three1">活动攻略</div>
          <div class="four1">让你的旅行,不止拍拍照就离开</div>
          <div class="hdgl">
            <div class="gl" v-for="item in gonglue" :key="item.key">
              <div class="hdglt">
                <router-link to="/Two"><img :src="item.p_pic" /></router-link>
                
              </div>
              <p>{{ item.p_title }}</p>
              <div class="zuozhe">{{ item.p_zuozhe }}</div>
              <div class="riqi">{{ item.p_time }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="daoyou">
        <div class="daoyoub">
          <div class="three1">导游风采</div>
          <div class="four1">感受景区独特的文化气息</div>
          <div class="saoma">
            <img src="/img/footer/erweima1.jpg" alt="" />
            <div>扫码预订</div>
          </div>
          <!-- 导游风采模块 -->
          <div class="dyr">
            <div class="dy" v-for="item in 10" :key="item">
              <div class="zhengjian">
                <p><button>点我资讯</button></p>
              </div>
              <div class="jieshao">
                <div>姓名:&nbsp;谭优</div>
                <div>语种:&nbsp;中文</div>
                <div>导游级别:&nbsp;金牌导游</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--美文美图模块  -->
      <div class="meitu">
        <div class="three2">美文美图</div>
        <div class="four2">江山如画,久违你的笑容</div>
        <div class="meitub">
          <span class="mei1">美文美图</span>
          <span class="mei2">MORE</span>
        </div>
        <div class="meitun" v-for="item in meitum" :key="item.key">
          <div class="meitut">
            <img :src="item.m_img" alt="" />
            <span class="youji">{{ item.m_title }}</span>
            <span class="youdaos1"> {{ item.m_text }}</span>
            <span class="meir">{{ item.m_data }}</span>
          </div>
        </div>
      </div>
      <!-- 热门活动模块 -->
      <div class="remen">
        <div class="rement1">
          <div class="rement">
            <span class="remenbt">热门活动</span>
          </div>
          <div class="rement11">
            <span class="remenbt">旅游资讯</span>
          </div>
          <div class="tu1">
            <img src="/img/index/hot/hot1.jpg" alt="" class="hot1" />
          </div>
          <div class="tu2">
            <img src="/img/index/hot/hot2.jpg" alt="" class="hot2" />
          </div>
          <div class="tu3">
            <img src="/img/index/hot/hot3.jpg" alt="" class="hot3" />
          </div>
        </div>
        <div class="lvyouzi" v-for="item in zixun" :key="item.key">
          <p class="nei">{{ item.r_jieshao }}</p>
          <p class="ri">{{ item.r_riqi }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cats: [],
      qijing: [],
      gonglue: [],
      meitum: [],
      zixun: [],
    };
  },
  mounted() {
    this.axios.get("/first").then((result) => {
      // console.log(result);
      // 将result.data.result中返回的文章详情对象存入data
      this.cats = result.data.results;
    });
    this.axios.get("/qijing").then((result) => {
      // console.log(result);
      // 将result.data.result中返回的文章详情对象存入data
      this.qijing = result.data.results;
    });
    this.axios.get("/erlou").then((result) => {
      // console.log(result);
      // 将result.data.result中返回的文章详情对象存入data
      this.gonglue = result.data.results;
    });
    this.axios.get("/meitum").then((result) => {
      // console.log(result);
      // 将result.data.result中返回的文章详情对象存入data
      this.meitum = result.data.results;
    });
    this.axios.get("/zixun").then((result) => {
      // console.log(result);
      // 将result.data.result中返回的文章详情对象存入data
      this.zixun = result.data.results;
    });
  },
};
</script>
<style scoped>
.zreo {
  margin: auto;
  min-width: 1200px;
}
img {
  cursor: pointer;
}
.ri {
  color: gray;
  margin-left: -20px;
}
.nei {
  width: 65%;
}
.lvyouzi {
  font-size: 14px;
}

.lvyouzi p {
  display: inline-block;

  padding: 18px 0px 18px 18px;
  border-top: 1px solid rgb(235, 230, 230);
}
.rement11 {
  width: 365px;
  /* border-bottom: 1px solid rgb(235, 230, 230); */
  display: inline-block;
  padding-top: 15px;
  margin-left: 14px;
}
.lvyouzi {
  display: inline-block;
  width: 365px;
}
.tu3 {
  margin-top: 35px;
}
.hot2,
.hot3 {
  width: 413px;
  height: 165px;
  margin-top: 10px;
  margin-left: 20px;
}
.tu1 {
  width: 400px;
  height: 378px;
  overflow: hidden;
  align-content: center;
  margin-top: 10px;
}
.tu1,
.tu2,
.tu3 {
  display: inline-block;
  float: left;
}
.hot1 {
  height: 378px;
}
.remenbt {
  border-bottom: 1px solid #ea4619;
  padding: 12px;
}

.rement {
  width: 825px;
  border-bottom: 1px solid rgb(235, 230, 230);
  padding-bottom: 15px;
}
.rement,
.lvyouzi {
  display: inline-block;
}

.remen {
  width: 1204px;
  height: 540px;
  margin: auto;
}
.meir {
  margin-left: 25px;
  color: gray;
  font-size: 14px;
}
.youdaos1 {
  width: 850px;
  display: inline-block;
  margin-left: 25px;
  font-size: 14px;
  color: gray;

  line-height: 28px;
  padding-bottom: 20px;
}
.youji {
  margin-top: 20px;
  padding: 40px 20px;
  line-height: 40px;
}
.meitun > div {
  display: inline-block;
}
.meitut img {
  width: 260px;
  height: 146px;
  float: left;
}
.meitun {
  margin: 30px;
}
.mei2 {
  color: gray;
  float: right;
}
.mei1 {
  color: #ea4619;
  border-bottom: 1px solid #ea4619;
  float: left;
}
.meitub span {
  padding: 12px;
  font-size: 16px;
}
.meitub {
  width: 1204px;
  height: 40px;
  margin-top: 30px;
  border-bottom: 1px solid rgb(235, 230, 230);
}
.three2 {
  font-size: 51px;
  color: #ea4619;
  text-align: center;
  margin-top: 40px;
  padding-top: 60px;
}
.four2 {
  font-size: 20px;
  text-align: center;
  color: #ea4619;
  margin-top: 15px;
}

.meitu {
  width: 1200px;
  height: 804px;

  margin: auto;
}
.dy p {
  float: left;
  color: #fff;
  font-size: 35px;
  margin-top: -240px;
  margin-left: 20px;
}
.dy p {
  opacity: 1;
  display: none;
}
.zhengjian:hover {
  width: 185px;
  height: 265px;
  background-color: gray;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  opacity: 0.5;
  filter: none;
}
.zhengjian {
  width: 185px;
  height: 265px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  margin-top: 5px;
  margin-left: 2px;
  background-color: gray;
  text-align: center;
  background-image: url("/img/daoyou.jpg");
}
.jieshao div {
  margin-top: 10px;
  font-size: 14px;
  color: gray;
}
.jieshao {
  width: 154px;
  text-align: left;
  margin-top: 10px;
  margin-left: 8px;
}
/* .dy img:hover {
  width: 185px;
  height: 265px;
  background-color: gray;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  opacity: 0.5;
  color: #fff;
} */
.dy img {
  width: 185px;
  height: 100%;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}
.dyr {
  margin-top: 80px;
}
.dy {
  width: 188px;
  height: 350px;
  background-color: #fff;
  float: left;
  margin: 15px 20px;
  text-align: center;
}
.saoma > div {
  color: #fff;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
}
.saoma > img {
  width: 144px;
}
.saoma {
  width: 144px;
  height: 184px;
  float: right;
  margin-top: -104px;
}
.daoyoub {
  width: 1200px;
  margin: auto;
}
.daoyou {
  width: 100%;
  height: 1150px;
  background-image: url("/img/index/banner/lunbo1.jpg");
  background-size: cover;
  margin-top: -50px;
}
.hdglt > img:hover {
  width: 390px;
  height: 280px;
  transform: scale(1.1);
  transition: transform 1s;
}
.hdglt {
  width: 390px;
  height: 280px;
  overflow: hidden;
}
.riqi {
  float: right;
  margin-right: 20px;
}
.zuozhe {
  float: left;
  margin: 15px;
}
.zuozhe,
.riqi {
  font-size: 14px;
  color: #999;
  display: inline-block;
  margin-top: 30px;
}
.gl img {
  width: 100%;
}
.gl p {
  text-align: left;
  margin: 20px 10px;
  font-size: 17px;
  color: #4b4b4b;
}
.hdgl {
  margin-top: 50px;
  margin-left: -25px;
}
.gl {
  width: 390px;
  height: 406px;
  background-color: #fff;
  margin: 9px;
  float: left;
}
.two1 {
  width: 1200px;
  height: 1150px;
  margin: auto;
  text-align: center;
}
.three1 {
  font-size: 51px;
  color: #fff;
  text-align: center;
  margin-top: 50px;
  padding-top: 60px;
}
.four1 {
  font-size: 20px;
  text-align: center;
  color: #fff;
  margin-top: 15px;
}
.huodong {
  background-size: cover;
  background-image: url("/img/index/banner/lunbo4.jpg");
}
.yilan {
  width: 1200px;
  height: 668px;
  margin: auto;
}
.yilan > div {
  width: 278px;
  height: 320px;
  float: left;

  margin: 10px;
  display: inline-block;
}
.yilan img:hover {
  width: 277px;
  height: 275px;
  transform: scale(1.1);
  transition: transform 1s;
}
.yilan p {
  font-size: 24px;
  text-align: center;
  margin-top: 20px;
}
.yilantu {
  width: 277px;
  height: 275px;
  cursor: pointer;
  overflow: hidden;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.two {
  min-width: 1200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.three {
  font-size: 40px;
  text-align: center;
  margin-bottom: 2px;
}
.four {
  font-size: 20px;
  text-align: center;
  color: gray;
  margin-top: 12px;
}
</style>